$(document).ready(function() {

	// --- language dropdown --- //

	// turn select into dl
	createDropDown3();
	createDropDown();
	createDropDown2();
	
	
	
	
	var $dropTrigger3 = $(".dropdown3 dt a");
	var $languageList3 = $(".dropdown3 dd ul");
	var $dropTrigger = $(".dropdown dt a");
	var $languageList = $(".dropdown dd ul");
	var $dropTrigger2 = $(".dropdown2 dt a");
	var $languageList2 = $(".dropdown2 dd ul");
	
	
	// open and close list when button is clicked
	$dropTrigger3.toggle(function() {
		$languageList3.slideDown(200);
		$dropTrigger3.addClass("active");
	}, function() {
		$languageList3.slideUp(200);
		$(this).removeAttr("class");
	});
	$dropTrigger.toggle(function() {
		$languageList.slideDown(200);
		$dropTrigger.addClass("active");
	}, function() {
		$languageList.slideUp(200);
		$(this).removeAttr("class");
	});
	// open and close list when button is clicked
	$dropTrigger2.toggle(function() {
		$languageList2.slideDown(200);
		$dropTrigger2.addClass("active");
	}, function() {
		$languageList2.slideUp(200);
		$(this).removeAttr("class");
	});
	
	
	

	// close list when anywhere else on the screen is clicked
	$(document).bind('click', function(ag) {
		var $clicked = $(ag.target3);
		if (! $clicked.parents().hasClass("dropdown3"))
			$languageList3.slideUp(200);
			$dropTrigger3.removeAttr("class");
	});
	$(document).bind('click', function(e) {
		var $clicked = $(e.target);
		if (! $clicked.parents().hasClass("dropdown"))
			$languageList.slideUp(200);
			$dropTrigger.removeAttr("class");
	});
	// close list when anywhere else on the screen is clicked
	$(document).bind('click', function(as) {
		var $clicked = $(as.target2);
		if (! $clicked.parents().hasClass("dropdown2"))
			$languageList2.slideUp(200);
			$dropTrigger2.removeAttr("class");
	});
	
	
	
	

	// when a language is clicked, make the selection and then hide the list
});

	// actual function to transform select to definition list
	
	function createDropDown3(){
		var $form3 = $("div#country-select3 form");
		$form3.hide();
		var source = $("#Zone");
		source.removeAttr("autocomplete");
		var selected = source.find("option:selected");
		var options = $("option", source);
		$("#country-select3").append('<dl id="target3" class="dropdown3"></dl>')
		$("#target3").append('<dt class="' + selected.val() + '"><a href="#"><span class="flag"></span><em>' + selected.text() + '</em></a></dt>')
		$("#target3").append('<dd><ul></ul></dd>')
		options.each(function(){
			$("#target3 dd ul").append('<li class="' + $(this).val() + '"><a href="' + $(this).attr("title") + '"><span class="flag"></span><em>' + $(this).text() + '</em></a></li>');
			});
	}
	
	
	function createDropDown(){
		var $form = $("div#country-select form");
		$form.hide();
		var source = $("#country-options");
		source.removeAttr("autocomplete");
		var selected = source.find("option:selected");
		var options = $("option", source);
		$("#country-select").append('<dl id="target" class="dropdown"></dl>')
		$("#target").append('<dt class="' + selected.val() + '"><a href="#"><span class="flag"></span><em>' + selected.text() + '</em></a></dt>')
		$("#target").append('<dd><ul></ul></dd>')
		options.each(function(){
			$("#target dd ul").append('<li class="' + $(this).val() + '"><a href="' + $(this).attr("title") + '"><span class="flag"></span><em>' + $(this).text() + '</em></a></li>');
			});
	}





function createDropDown2(){
		var $form2 = $("div#country-select2 form");
		$form2.hide();
		var source = $("#country-options2");
		source.removeAttr("autocomplete");
		var selected = source.find("option:selected");
		var options = $("option", source);
		$("#country-select2").append('<dl id="target2" class="dropdown2"></dl>')
		$("#target2").append('<dt class="' + selected.val() + '"><a href="#"><span class="flag2"></span><em>' + selected.text() + '</em></a></dt>')
		$("#target2").append('<dd><ul></ul></dd>')
		options.each(function(){
			$("#target2 dd ul").append('<li class="' + $(this).val() + '"><a href="' + $(this).attr("title") + '"><span class="flag2"></span><em>' + $(this).text() + '</em></a></li>');
			});
	}
